<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<head>
		<title></title>
	</head>
	<body>
		<div>
			div
			<a href="#"></a>
			<p>
				p
				<!-- 此节点通过测试 不是p标签的子节点 是next的兄弟节点
				原因：p属于短语内容容器 不能包含块级元素 比如div p ul li
					div 属于流内容，可以包含一起的块级元素
				 -->
				<div class="div1">
					div1
					<span>span</span>
				</div>
			</p>
			<div class="div2">
				div2
			</div>
		</div>

		<script>
			
			// 什么是节点？
		/*
			HTML 文档中的所有事物都是节点：
			1.整个文档是文档节点
			2.每个 HTML 元素是元素节点
			3.HTML 元素内的文本是文本节点
			4.每个 HTML 属性是属性节点
			5.所有注释是注释节点
		*/

		// 父节点
		let div1 = document.querySelector(".div1");
		console.log(div1);
		let div2 = document.getElementsByClassName("div1");
		console.log(div2);

		console.log(div1.parentNode); // div
		console.log(div2[0].parentNode); // div

		let p = document.querySelector("p");
		console.log(p);
		console.log(p.parentNode);

		// 兄弟节点
		// 上一个兄弟节点
		console.log(p.previousSibling);
		// 下一个兄弟节点
		console.log(p.nextSibling);


		// 子节点
		console.log(p.children); // HTMLCollection
		console.log(p.childNodes); // NodeList 可以包含文本节点等

		// 当前节点的第一个孩子节点
		console.log(p.firstChild);
		// 当前节点的最后一个孩子节点
		console.log(p.lastChild);



		// 节点的值
		console.log(div2[0].innerHTML);
		console.log(div2[0].firstChild.nodeValue);
		console.log(div2[0].lastChild.nodeValue);


		// DOM的根节点
		console.log(document.documentElement);
		console.log(document.body);

		// nodeName 属性规定节点的名称
		/*
			nodeName 是只读的
			元素节点的 nodeName 等同于标签名
			属性节点的 nodeName 是属性名称
			文本节点的 nodeName 总是 #text
			文档节点的 nodeName 总是 #document
		*/
		console.log(div2[0].attributes[0].nodeName);
		console.log(document.nodeName); //#document


		// nodeValue 属性规定节点的值。
		/*
			元素节点的 nodeValue 是null
			文本节点的 nodeValue 是文本文本
			属性节点的 nodeValue 是属性值
		*/
		console.log(div2[0].attributes[0].nodeValue);
		

		// nodeType 属性返回节点的类型
		/*
		ELEMENT_NODE	1	<h1 class="heading">W3School</h1>
		TEXT_NODE	3	W3School
		COMMENT_NODE	8	<!-- 这是注释 -->
		DOCUMENT_NODE	9	HTML 文档本身（<html> 的父）
		DOCUMENT_TYPE_NODE	10	<!Doctype html>
		*/


		</script>
	</body>
</html>